<template>
	<view>
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<uni-nav-bar @clickLeft="fh" :border="false" left-icon="left" title="条件筛选" />
		</view>
		<view class="nmb">
			<text>品牌</text>
			<view class="tabs">
				<v-tabs v-model="current" color="#7D8CA4" activeColor="#152034" paddingItem="0 	35rpx" :tabs="tabs"
					@change="changeTab"></v-tabs>
			</view>
		</view>

		<view class="producttype">
			<view class="producttype_item" v-for="(item,index) in typeList" :key="index">
				<image src="/static/model/xiaomi.png" mode=""></image>
				<text>{{item.type}}</text>
			</view>
		</view>

		<!-- 价格区间 -->


		<view class="price">
			<view class="pricetit">
				<text>价格区间</text>
			</view>
			<view class="price1">
				<input type="text" value="" placeholder="最低价" />
			</view>
			<view class="heng">
			</view>
			<view class="price1">
				<input type="text" value="" placeholder="最高价" />
			</view>

		</view>

		<!-- 行走方式 -->

		<view class="xztype">

			<view class="xztit">
				<text>行走方式</text>
			</view>
			<view class="xztype_item" :style="{background:xzfs==index?'#DEEBFF':''}" v-for="(item,index) in xztype"
				:key="index" @click="xzchange(index)">
				<text>{{item.type}}</text>
			</view>
		</view>

		<!-- 身高 -->

		<view class="price">
			<view class="pricetit">
				<text>身高</text>
			</view>
			<view class="price1">
				<input type="text" value="" placeholder="请输入CM" />
			</view>
			<view class="heng">
			</view>
			<view class="price1">
				<input type="text" value="" placeholder="请输入CM" />
			</view>

		</view>

		<!-- 体重 -->

		<view class="price">
			<view class="pricetit">
				<text>体重</text>
			</view>
			<view class="price1">
				<input type="text" value="" placeholder="请输入KG" />
			</view>
			<view class="heng">
			</view>
			<view class="price1">
				<input type="text" value="" placeholder="请输入KG" />
			</view>
		</view>

		<view class="select_bt">
			<view class="select_bt1">
				<text>重置</text>
			</view>
			<view class="select_bt2">
				<text>搜索</text>
			</view>
		</view>

		<view class="tot">

		</view>
		<!-- 产品 -->
		<view class="product">
			<view class="productlist">
				<view class="productlist_item">
					<view class="productlist_item_lf">
						<image src="/static/logo.png" mode=""></image>
					</view>

					<view class="productlist_item_rg">
						<view class="productlist_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>

						<view class="productlist_item_bom">
							<view class="productlist_item_bom_lf">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="productlist_item_bom_lf">
								<text class="type1">体重</text>
								<text class="type2">14kg</text>
							</view>

							<view class="productlist_item_bom_bt">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				current: 0,
				tabs: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				xzfs: 0,
				typeList: [{
						type: '小米'
					},
					{
						type: '小米'
					},
					{
						type: '奔驰汽车'
					},
					{
						type: '小米'
					},
					{
						type: '小米'
					},
					{
						type: '小米'
					},
					{
						type: '小米'
					},
					{
						type: '小米'
					},
					{
						type: '小米'
					},
					{
						type: '小米'
					}
				],
				xztype: [{
						type: '足式'
					},
					{
						type: '轮式'
					},
				]
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			/* 返回 */
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			xzchange(index) {
				this.xzfs = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nmb {
		width: 93%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabs {
			width: 85%;
		}

		>text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #7D8CA4;
		}
	}

	.producttype {
		width: 91%;
		display: flex;
		margin: 30rpx auto 0;
		flex-wrap: wrap;

		.producttype_item {
			display: flex;
			flex-direction: column;
			width: 16.6%;
			margin-bottom: 30rpx;

			>image {
				width: 53.44rpx;
				height: 53.44rpx;
				margin: auto;
			}

			>text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #45516B;
				margin: auto;
			}
		}

	}

	.select_tit {
		width: 91%;
		margin: 30rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 31rpx;
		color: #152034;
	}

	.price {
		width: 91%;
		margin: 15rpx auto 0;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;

		.pricetit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #152034;
			width: 122rpx;
			margin-right: 15rpx;
		}

		.price1 {

			width: 210rpx;
			height: 69rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;

			border: 1rpx solid #7D8CA4;

			>input {
				margin: auto;
				display: flex;
				justify-content: center;
				text-align: center;
			}

			>input /deep/ .input-placeholder {

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #7D8CA4;
				display: flex;
				justify-content: center;
			}
		}

		.heng {
			width: 19rpx;
			height: 0rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 1rpx solid #CCCCCC;
			margin-left: 22rpx;
			margin-right: 22rpx;
		}

		.pricebt {
			width: 153rpx;
			height: 69rpx;
			background: #1677FF;
			border-radius: 61rpx 61rpx 61rpx 61rpx;
			margin-left: auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.xztype {
		display: flex;
		width: 91%;
		margin: 15rpx auto 0;
		padding-bottom: 30rpx;
		align-items: center;

		.xztit {

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #152034;

		}

		.xztype_item {
			margin-left: 15rpx;
			width: 172rpx;
			height: 69rpx;
			background: #F8F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #152034;
		}
	}

	.select_bt {
		display: flex;
		align-items: center;
		width: 83%;
		justify-content: space-between;
		margin: 15rpx auto 0;

		.select_bt1 {
			width: 296rpx;
			height: 69rpx;
			background: #FFFFFF;
			border-radius: 61rpx 61rpx 61rpx 61rpx;
			border: 2rpx solid #7D8CA4;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #45516B;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.select_bt2 {
			width: 296rpx;
			height: 69rpx;
			background: #1677FF;
			border-radius: 61rpx 61rpx 61rpx 61rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.tot {
		width: 750rpx;
		height: 19rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 45rpx;
	}

	.product {
		width: 91%;
		margin: 31rpx auto 0;

		.productlist {
			.productlist_item {
				display: flex;

				.productlist_item_lf {
					>image {
						width: 229rpx;
						height: 172rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}

				.productlist_item_rg {
					margin-left: 30rpx;

					.productlist_item_rg_tit {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 31rpx;
						color: #152034;
					}

					.productlist_item_bom {
						display: flex;
						align-items: center;
						margin-top: 17rpx;

						.productlist_item_bom_lf {
							display: flex;
							flex-direction: column;
							margin-right: 45rpx;

							.type1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #7D8CA4;
							}

							.type2 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 23rpx;
								color: #45516B;
								margin-top: 10rpx;
							}
						}

						.productlist_item_bom_bt {
							margin-left: auto;
						}
					}
				}

			}
		}
	}

	.productlist_item_bom_bt button {
		width: 153rpx;
		height: 69rpx;
		background: #1677FF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>